<template>
  <div class="content">
    <el-card shadow="never">
      <!-- 查询 -->
      <el-row type="flex" justify="space-between">
        <el-form
          ref="searchForm"
          :model="searchForm"
          size="small"
          class="demo-form-inline"
          inline
        >
          <el-form-item label="设备名称:" prop="name">
            <el-input
              v-model.trim="searchForm.name"
              placeholder="请输入设备名称"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="handleSearch()"
              >查询
            </el-button>
            <el-button
              size="small"
              icon="el-icon-refresh-right"
              @click="handleClear()"
              >重置</el-button
            >
            <el-button
              size="small"
              type="success"
              icon="el-icon-circle-plus-outline"
              @click="openDialog()"
            >新增</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <!-- 表格 -->
      <el-table ref="table" :data="tableData" border>
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column label="设备图片" align="center">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.photo"
              :src="scope.row.photo"
              style="width: 50px;height: 50px;"
              :preview-src-list="[scope.row.photo]"
              @click="handleImageClick"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="设备名" show-overflow-tooltip align="center" />
        <el-table-column prop="newPrice" label="最新价" show-overflow-tooltip align="center"/>
        <el-table-column prop="oldPrice" label="发售价" show-overflow-tooltip align="center"/>
        <el-table-column label="操作" width="330" align="center">
          <template slot-scope="scope">
            <el-button
              type="warning"
              size="small"
              @click="edit(scope.row.id)"
            >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="deletePhone(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--  新增数据弹窗   -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-form :model="AddFrom">
          <el-form-item label="设备名称" label-width="80px">
            <el-input v-model="AddFrom.name" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="最新价" label-width="80px">
            <el-input v-model="AddFrom.newPrice" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="发售价" label-width="80px">
            <el-input v-model="AddFrom.oldPrice" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="设备图片">
            <el-upload
              ref="upload"
              action="http://localhost:7080/api/FileUpload/upload"
              list-type="picture-card"
              :limit="1"
              :on-success="handleSuccess">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addDevice">确 定</el-button>
        </span>
      </el-dialog>

      <!--  编辑数据弹窗   -->
      <el-dialog
        title="编辑信息"
        :visible.sync="dialogVisible2"
        width="30%"
      >
        <el-form :model="editForm">
          <el-form-item label="设备名称" label-width="80px">
            <el-input v-model="editForm.name" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="最新价" label-width="80px">
            <el-input v-model="editForm.newPrice" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="发售价" label-width="80px">
            <el-input v-model="editForm.oldPrice" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="设备图片" label-width="80px">
            <el-upload
              ref="upload2"
              action="http://localhost:7080/api/FileUpload/upload"
              show-file-list="false"
              :on-success="handleSuccess2"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>

            <el-image
              v-if="editForm.photo"
              :src="editForm.photo"
              style="width: 100px; height: 100px;"
              fit="cover"
              :preview-src-list="[editForm.photo]"
              @click="handleImageClick"
            >
            </el-image>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取消</el-button>
          <el-button type="primary" @click="updateDevice">保存</el-button>
        </div>
      </el-dialog>

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        layout="->,total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 30, 40]"
        :current-page="searchForm.pageNumber"
        :page-size="searchForm.pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        pageNumber: 1,
        pageSize: 10,
        name: "",
      },
      total: 1, // 初始化应为 0，这里只做演示效果使用
      tableData: [
        {
          name: "",
          newPrice:"",
          oldPrice:""
        },
      ],
      dialogVisible:false,
      dialogVisible2:false,
      AddFrom:{
        name:"",
        newPrice:"",
        oldPrice:"",
        photo:""
      },
      editForm:{
        id:"",
        name:"",
        newPrice: "",
        oldPrice: "",
        photo: ""
      }
    };
  },
  created() {
    this.getPageList();
  },

  methods: {
    async getPageList() {
      const result = await this.$axios.get("/Device/name", {
        params: this.searchForm,
      });
      if (result.data.success) {
        this.tableData = result.data.data;
        console.log(this.tableData);
      } else {
        this.$message.error(result.data.message);
      }
    },
    // 切换tab
    changeRadio(value) {
      this.searchForm.state = value;
      this.getPageList();
    },
    //搜索
    handleSearch() {
      this.searchForm.current = 1;
      this.getPageList();
    },
    //重置
    handleClear() {
      this.$refs.searchForm.resetFields();
      this.getPageList();
    },
    // 切换每页显示条数
    handleSizeChange(val) {
      this.searchForm.size = val;
      this.searchForm.current = 1;
      this.getPageList();
    },
    // 点击某一页，跳转某一页
    handleCurrentChange(val) {
      this.searchForm.current = val;
      this.getPageList();
    },
    //打开弹窗
    openDialog(){
      this.dialogVisible = true
    },

    //文件上传相关函数
    handleSuccess(res){
      if (res.success){
        this.AddFrom.photo = res.filePath;
      }
    },

    handleSuccess2(res){
      if (res.success){
        this.editForm.photo = res.filePath;
      }
    },

    addDevice(){
      this.$axios.post("/Device",this.AddFrom).then(res=>{
        if (res.data.success){
          this.$message.success("添加成功")
          this.AddFrom = []
          this.dialogVisible = false
          //清空上传组件中的文件
          this.$refs.upload.clearFiles()
          this.getPageList()
        }else {
          this.$message.error(res.data.message)
        }
      })
    },

    // 删除
    deletePhone(id) {
      this.$confirm("确认要删除该设备吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 删除逻辑
          this.$axios
            .delete("/Device", {
              params: { id: id },
            })
            .then((res) => {
              if (res.data.success) {
                this.$message({ message: "删除成功！", type: "success" });
                this.getPageList();
              } else {
                this.$message.error(res.data.message);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },


    edit(id) {
      this.$axios.get("/Device/id?id="+id).then(res=>{
        if (res.data.success){
          this.editForm = res.data.data
          this.dialogVisible2 = true
        }else {
          this.$message.error(res.data.message)
        }
      })
    },
    //编辑
    updateDevice() {
      this.$axios.put("/Device", this.editForm).then((res) => {
        if (res.data.success) {
          this.$message.success("更新成功");
          this.dialogVisible2 = false;
          this.editForm = {};
          this.$refs.upload2.clearFiles();
          this.getPageList();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },

    handleImageClick() {
      this.$refs.imageViewer.doPreview(); // 触发图片预览
    }
  }
};
</script>

<style scoped>
.content {
  margin: 20px 0px;
}

.el-table {
  margin: 20px 0px;
}
</style>
